<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    /*#app{*/
    /*    width: 320px;*/
    /*    height: 800px;*/
    /*}*/
    #app .con {
        width: 300px;
        height: 200px;
        float: left;
        display: inline-block;
    }
    .biaoti{
        text-align: left;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 40px;

    }
    .info {
        width: 30%;
        height: 100%;
        position: absolute;
        display: inline-block;
        float: right;
        top:0px;
        left:480px;
        /*line-height:100%;*/
    }

    .con .con-3 {
        clear: left;
    }

    .con .content, .ti-con {
        width: 300px;
        height: 40px;
        /*background-color: #3a8ee6;*/
        /*border: 1px solid #99a9bf;*/
        /*border-bottom: none;*/
    }
    .ti-con {
        width: 300px;
        height: 40px;
        /*background-color: #3a8ee6;*/
        border: 1px solid #99a9bf;
        border-bottom: none;
    }

    .myCanvas {
        width: 300px;
        height: 100px;
        /*background-color: #5daf34;*/
        border: 1px solid #99a9bf;
    }

    .content .title {
        width: 90%;
        height: 100%;
        display: inline-block;
        font-size: 15px;
        text-align: justify;
        /*line-height:100px*/
        padding: 10px;
        color: black;
    }



    .red {
        width: 30px;
        height: 15px;
        background-color: red;
        position: relative;
        left: 20px;
        top: 10px

    }

    .blue {
        width: 30px;
        height: 15px;
        background-color: blue;
        position: relative;
        left: 20px;
        top: 10px
    }

    span {
        font-size: 10px;
        font-weight: bold;
        width: 30px;
        height: 15px;
        position: relative;
        left: 60px;
        top: -10px;
        /*font-style: italic;*/
        color: black;
    }

</style>
<body>
<div id="app">
    <div class="biaoti">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp&nbsp&nbsp融 &nbsp&nbsp合 &nbsp&nbsp显 &nbsp&nbsp示 &nbsp&nbsp策 &nbsp&nbsp略 </div>
    <div class="info">
        <div class="red"></div>
        <span>目标图像</span>
        <div class="blue"></div>
        <span>源图像</span>
    </div>
    <div class="con">
        <div class="content">
            <div class="ti-con">
                <div class="title">over:在目标图像上显示源图像</div>
            </div>
        </div>
        <canvas class="myCanvas">
        </canvas>
    </div>
    <div class="con" >
        <div class="content">
            <div class="ti-con">
                <div class="title">
                    atop:在目标顶显示源图像,源外部隐藏。
                </div>
            </div>
        </div>
        <canvas class="myCanvas">
        </canvas>
    </div>
    <div class="con con-3" style="clear: left">
        <div class="content">
            <div class="ti-con">
                <div class="title">
                    in: 在目标图像中显示源图像
                </div>
            </div>
        </div>
        <canvas class="myCanvas">
        </canvas>
    </div>
    <div class="con" >
        <div class="content">
            <div class="ti-con">
                <div class="title">out:显示目标图像之外源图像部分</div>
            </div>
        </div>
        <canvas class="myCanvas">
        </canvas>
    </div>
    <div class="con" style="clear: left">
        <div class="content">
            <div class="ti-con">
                <div class="title">
                    lighter:显示源图像 + 目标图像
                </div>
            </div>
        </div>
        <canvas class="myCanvas">
        </canvas>
    </div>
    <div class="con" >
        <div class="content">
            <div class="ti-con">
                <div class="title">
                    xor:组合图像与目标图像
                </div>
            </div>
        </div>
        <canvas class="myCanvas">
        </canvas>
    </div>
</div>
<script>
    // over
    const c = document.getElementsByClassName("myCanvas")[0];
    const ctx = c.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 75, 50);
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "blue";
    ctx.fillRect(50, 50, 75, 50);
    //atop
    const c_1 = document.getElementsByClassName("myCanvas")[1];
    const ctx_1 = c_1.getContext("2d");
    ctx_1.fillStyle = "red";
    ctx_1.fillRect(20, 20, 75, 50);
    ctx_1.globalCompositeOperation = "source-atop";
    ctx_1.fillStyle = "blue";
    ctx_1.fillRect(50, 50, 75, 50);
    // in
    const c_2 = document.getElementsByClassName("myCanvas")[2];
    const ctx_2 = c_2.getContext("2d");
    ctx_2.fillStyle = "red";
    ctx_2.fillRect(20, 20, 75, 50);
    ctx_2.globalCompositeOperation = "source-in";
    ctx_2.fillStyle = "blue";
    ctx_2.fillRect(50, 50, 75, 50);

    //out
    const c_3 = document.getElementsByClassName("myCanvas")[3];
    const ctx_3 = c_3.getContext("2d");
    ctx_3.fillStyle = "red";
    ctx_3.fillRect(20, 20, 75, 50);
    ctx_3.globalCompositeOperation = "source-out";
    ctx_3.fillStyle = "blue";
    ctx_3.fillRect(50, 50, 75, 50);

    //lighter
    const c_4 = document.getElementsByClassName("myCanvas")[4];
    const ctx_4 = c_4.getContext("2d");
    ctx_4.fillStyle = "red";
    ctx_4.fillRect(20, 20, 75, 50);
    ctx_4.globalCompositeOperation = "lighter";
    ctx_4.fillStyle = "blue";
    ctx_4.fillRect(50, 50, 75, 50);

    //xor
    const c_5 = document.getElementsByClassName("myCanvas")[5];
    const ctx_5 = c_5.getContext("2d");
    ctx_5.fillStyle = "red";
    ctx_5.fillRect(20, 20, 75, 50);
    ctx_5.globalCompositeOperation = "xor";
    ctx_5.fillStyle = "blue";
    ctx_5.fillRect(50, 50, 75, 50);

</script>

</body>
</html>